<template>
  <div class="child-eq">
    <div class="childpage-logo-title">
      <i class="iconfont icon_biaotijiantou" @click="handleBack"></i>
      <span class="page-title-text">设备一张图</span>
    </div>
    <div class="child-eq-content">
      <div class="childpage-title">地图标注</div>
      <div class="child-eq-groups">
        <div v-for="(item , index) in markDoker" :key="index">
          <div class="each-goup" :class="{'active': item.type ===changeMarkType}" @click="handleChangeMarkType(item)" :ref="'eachGroup_'+item.type">
            <div class="each-goup-left">
              <img :src="item.icon" alt />
            </div>
            <div class="each-goup-name">{{ item.name }}</div>
            <div class="each-goup-right">{{ item.number }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTypeMarkNum } from '@/api/gis'
import '@/styles/common/childPage.scss'
export default {
  name: 'MapEquipmentLeft',
  components: {},
  props: {
    parames: {
      required: true,
    },
  },
  data() {
    return {
      markDoker: [],
      changeMarkType: '',
      queryName: '',
      fcfId: '',
    }
  },
  created: function () {
    let that = this
    that.orgIds = that.parames.orgIds
    that.pageJumpTypes = that.parames.markType || '' //有可能是多种类型 ',' 隔开
    that.queryName = that.parames.name || ''
    that.fcfId = that.parames.fcfId || ''
    that.markTyps = that.bsConfig.Docker //标注类型集合
    that.dtype = localStorage.getItem('ilinkBs_currentMapType')
    if (that.dtype == 4) that.dtype = 2
    that.currentMarkTyps = [] //标注类型集合
    this.gisInfo = {}
    this.selectedTypes = []
    this.queryName = this.$store.state.equipmentQuery || ''
    that.getDokerNumber()
  },
  methods: {
    handleBack() {
      this.$store.commit('setCurrentMarkType', {})
      this.$store.commit('setEquipmentQuery', '')
      this.$Ctl.backProvePage()
    },
    getDokerNumber() {
      let that = this
      if (that.$store.state.currentMapType == 4) that.dtype = 2 // 如果地图为unity地图 则将dtype强改为2
      if (that.bsConfig.MapOptions.svgMap) that.dtype = 5
      let _param = {
        orgIds: this.orgIds,
        types: that.markTyps, //配置标注类型
        dtype: that.dtype,
      }
      if (that.dtype == 2) {
        that.gisInfo = JSON.parse(localStorage.getItem('ilinkBs_mapGisInfo'))
      }
      getTypeMarkNum(_param).then((res) => {
        let arr = []
        $.each(res.data, (index, obj) => {
          arr.push({
            type: obj.type,
            number: obj.count,
            icon: that.GLOBAL.mapMarkJsonData[obj.type]
              ? that.GLOBAL.mapMarkJsonData[obj.type]['dockerIcon']
              : '',
            name: obj.name,
          })
          that.currentMarkTyps.push(obj.type)
        })
        that.markDoker = arr
        if (that.pageJumpTypes) {
          $.each(that.pageJumpTypes.toString().split(','), (index, type) => {
            let one = arr.filter((n) => {
              return n.type == type
            })[0]
            if (one) {
              that.$nextTick(() => {
                that.showMarkerList(one)
              })
              return false
            }
          })
        } else if (this.$store.state.currentMarkType.type) {
          this.showMarkerList(this.$store.state.currentMarkType)
        } else {
          that.changeRight()
        }
      })
    },
    handleChangeMarkType(row) {
      this.queryName = ''
      this.fcfId = ''
      this.$store.commit('setEquipmentQuery', '')
      this.showMarkerList(row)
    },
    showMarkerList(row) {
      //20200918改成单选
      let that = this
      // 反选
      if (this.changeMarkType == row.type) {
        this.changeMarkType = ''
        this.selectedTypes = []
        this.$store.commit('setCurrentMarkType', {})
      } else {
        // 选中
        this.changeMarkType = row.type
        this.selectedTypes = [row.type]
        this.$store.commit('setCurrentMarkType', row)
      }
      this.changeMarkName = row.name || '设备'
      this.changeRight()
    },
    changeRight() {
      let that = this
      that.$Ctl.enterChild(
        'MapEquipment',
        {
          markType: that.changeMarkType || 0,
          orgIds: that.orgIds,
          selectedTypes: that.selectedTypes,
          title: that.changeMarkName,
          name: that.queryName,
          fcfId: that.fcfId || '',
        },
        'right'
      )
    },
  },
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.child-eq {
  height: 100%;
  width: 100%;
  .child-eq-tittle {
    color: #4699ff;
    font-size: 24px;
    padding: 15px 0;
    font-weight: bold;
  }
  .child-eq-content {
    width: 100%;
    height: calc(100% - 140px);
    .child-eq-sub-tittle {
      font-size: 18px;
      color: #61b9ef;
      margin-bottom: 10px;
    }
    .child-eq-groups {
      height: 100%;
      overflow-y: auto;
      .each-goup {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 8px 0;
        border: 1px solid rgba(70, 153, 255, 0.4);
        margin-right: 8px;
        margin-bottom: 15px;
        font-size: 18px;
        color: #fff;
        cursor: pointer;
        &.active {
          background: rgba(127, 192, 247, 0.1);
          box-shadow: inset 0px 0px 16px 3px rgb(24, 87, 182);
        }
        .each-goup-left {
          padding: 0 10px;
          img {
            width: 35px;
            height: 35px;
          }
        }
        .each-goup-name {
          width: 75%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .each-goup-right {
          width: 25%;
          text-align: right;
          padding-right: 8px;
          color: #5bb0e9;
        }
      }
    }
  }
}
</style>